<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <link rel="stylesheet" href="../lib/lay-module/step-lay/step.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .apply{
            color: #1e9fff;
            font-size: 14px;}
        .main-body {top:50%;left:50%;position:absolute;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;}
        .login-main .login-bottom .center .item input {display:inline-block;width:227px;height:22px;padding:0;position:absolute;border:0;outline:0;font-size:14px;letter-spacing:0;}
        .login-main .login-bottom .center .item .icon-1 {background:url(images/icon-login.png) no-repeat 1px 0;}
        .login-main .login-bottom .center .item .icon-2 {background:url(images/icon-login.png) no-repeat -54px 0;}
        .login-main .login-bottom .center .item .icon-3 {background:url(images/icon-login.png) no-repeat -106px 0;}
        .login-main .login-bottom .center .item .icon-4 {background:url(images/icon-login.png) no-repeat 0 -43px;position:absolute;right:-10px;cursor:pointer;}
        .login-main .login-bottom .center .item .icon-5 {background:url(images/icon-login.png) no-repeat -55px -43px;}
        .login-main .login-bottom .center .item .icon-6 {background:url(images/icon-login.png) no-repeat 0 -93px;position:absolute;right:-10px;margin-top:8px;cursor:pointer;}
        .login-main .login-bottom .tip .icon-nocheck {display:inline-block;width:10px;height:10px;border-radius:2px;border:solid 1px #9abcda;position:relative;top:2px;margin:1px 8px 1px 1px;cursor:pointer;}
        .login-main .login-bottom .tip .icon-check {margin:0 7px 0 0;width:14px;height:14px;border:none;background:url(images/icon-login.png) no-repeat -111px -48px;}
        .login-main .login-bottom .center .item .icon {display:inline-block;width:33px;height:22px;}
        .login-main .login-bottom .center .item {width:288px;height:35px;border-bottom:1px solid #dae1e6;margin-bottom:35px;}
        .login-main {width:428px;position:relative;float:left;}
        .login-main .login-top {height:117px;background-color:#148be4;border-radius:12px 12px 0 0;font-family:SourceHanSansCN-Regular;font-size:30px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#fff;line-height:117px;text-align:center;overflow:hidden;-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
        .login-main .login-top .bg1 {display:inline-block;width:74px;height:74px;background:#fff;opacity:.1;border-radius:0 74px 0 0;position:absolute;left:0;top:43px;}
        .login-main .login-top .bg2 {display:inline-block;width:94px;height:94px;background:#fff;opacity:.1;border-radius:50%;position:absolute;right:-16px;top:-16px;}
        .login-main .login-bottom {width:428px;background:#fff;border-radius:0 0 12px 12px;padding-bottom:53px;}
        .login-main .login-bottom .center {width:288px;margin:0 auto;padding-top:40px;padding-bottom:15px;position:relative;}
        .login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
        body {background:url(images/loginbg.png) 0% 0% / cover no-repeat;position:static;font-size:12px;}
        input::-webkit-input-placeholder {color:#a6aebf;}
        input::-moz-placeholder {/* Mozilla Firefox 19+ */            color:#a6aebf;}
        input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */            color:#a6aebf;}
        input:-ms-input-placeholder {/* Internet Explorer 10-11 */            color:#a6aebf;}
        input:-webkit-autofill {/* 取消Chrome记住密码的背景颜色 */            -webkit-box-shadow:0 0 0 1000px white inset !important;}
        html {height:100%;}
        .login-main .login-bottom .tip {clear:both;height:16px;line-height:16px;width:288px;margin:0 auto;}
        .login-main .login-bottom .tip .login-tip {font-family:MicrosoftYaHei;font-size:12px;font-weight:400;font-stretch:normal;letter-spacing:0;color:#9abcda;cursor:pointer;}
        .login-main .login-bottom .tip .forget-password {font-stretch:normal;letter-spacing:0;color:#1391ff;text-decoration:none;position:absolute;right:62px;}
        .login-main .login-bottom .login-btn {width:288px;height:40px;background-color:#1E9FFF;border-radius:16px;margin:24px auto 0;text-align:center;line-height:40px;color:#fff;font-size:14px;letter-spacing:0;cursor:pointer;border:none;}
        .login-main .login-bottom .center .item .validateImg {position:absolute;right:1px;cursor:pointer;height:36px;border:1px solid #e6e6e6;}
        .footer {left:0;bottom:0;color:#fff;width:100%;position:absolute;text-align:center;line-height:30px;padding-bottom:10px;text-shadow:#000 0.1em 0.1em 0.1em;font-size:14px;}
        .padding-5 {padding:5px !important;font-size: 16px}
        .footer a,.footer span {color:#fff;}
        @media screen and (max-width:428px) {.login-main {width:360px !important;}
            .login-main .login-top {width:360px !important;}
            .login-main .login-bottom {width:360px !important;}
        }
    </style>
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span>家电大师</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom">
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="userName" lay-verify="required"  placeholder="请输入登录账号" maxlength="24"/>
                </div>

                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" lay-verify="required"  placeholder="请输入密码" maxlength="20">
                    <span class="bind-password icon icon-4"></span>
                </div>


            </div>
            <div class="tip">
                <div>
                <a href="#" id = "apply" lay-event="apply" class="apply">申请成为工程师</a>
              <a href="#" id="forget-password" class="forget-password apply ">忘记密码？</a>
                </div>
            </div>
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0px;">
                <button class="login-btn" lay-submit lay-filter="login">立即登录</button>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    <span class="padding-5">©创作所有 2023/6/2-2023/7/7 工大21级软件实训第九组</span>
</div>
<script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script>

    layui.use(['form','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        $('.icon-nocheck').on('click', function () {
            if ($(this).hasClass('icon-check')) {
                $(this).removeClass('icon-check');
            } else {
                $(this).addClass('icon-check');
            }
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            axios.post('http://localhost:8080/login', data)
                .then(function(response) {
                    // 请求成功的处理逻辑
                    if(response.data.code == 0){

                        var tokenValue = response.data.data.token;
                        var role = response.data.data.role;
                        // 假设登录成功后返回的 Token 是 tokenValue
                        document.cookie = "satoken=" + tokenValue+"; path=/"

                        if( role === "103"){
                            layer.msg('工程师 欢迎您进入系统', { time: 800 }, function () {
                                window.location = 'index103.html';
                            }) // 根据实际返回的数据格式获取响应数据
                        }else if(role === "101"){
                            layer.msg('您好 系统管理员',{ time: 800 }, function () {
                                window.location = 'index.html';
                            }) // 根据实际返回的数据格式获取响应数据
                        }else{
                            layer.msg('您好 用户',{ time: 800 }, function () {
                                window.location = 'index102.html';
                            })
                        }

                    }else{
                        layer.msg('登录失败');
                    }

                })
                .catch(function(error) {
                    // 请求失败的处理逻辑
                    layer.msg("登录失败")
                });

            return false;
        });
    });
</script>


<script>
    layui.use(['layer','form'], function() {
        var layer = layui.layer;
        var form = layui.form;
        // 点击申请按钮弹出小窗口
        document.getElementById('apply').addEventListener('click', function(obj) {


                var index = layer.open({
                    title: '添加工程师',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '50%'],
                    content: './apply.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
        });





        document.getElementById('forget-password').addEventListener('click', function() {
            layer.open({
                type: 1,
                title: '重置密码',
                content: `
            <form id="reset" class="layui-form" >


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">验证手机号</label>
                        <div class="layui-input-inline layui-input-wrap">
                            <input type="tel" name="phoneNumber" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                        </div>
                        <div class="layui-form-mid" style="padding: 0!important;">
                            <button id="get-vercode" type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="text" name="code" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">重置新密码</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="text" name="newPassword" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
          `,
                area: ['600px', '250px'],
                success: function(layero, index) {
                    var isCodeSent=false
                    var isCooldown=false
                    document.getElementById('get-vercode').addEventListener('click', function() {
                        if (isCodeSent) {
                            layer.msg("您已经获取过验证码了");
                            return;
                        }

                        if (isCooldown) {
                            layer.msg("请等待冷却时间结束");
                            return;
                        }

                        // 获取用户输入的手机号
                        var phoneNumber = document.querySelector('input[name="phoneNumber"]').value;

                        // 发送请求到后台，请求发送验证码
                        // 你可以使用Ajax或其他方式发送请求
                        axios.get('http://localhost:8080/resetPassword/' + phoneNumber)
                            .then(function(response) {
                                // 请求成功的处理逻辑
                                layer.msg("验证码发送成功");
                                isCodeSent = true;

                                // 进入冷却状态，一分钟后恢复
                                isCooldown = true;
                                setTimeout(function() {
                                    isCooldown = false;
                                }, 60000); // 一分钟

                            })
                            .catch(function(error) {
                                // 请求失败的处理逻辑
                                layer.msg("发送失败，请稍后再试");
                            });

                        console.log(phoneNumber);
                    });


                    layui.form.on('submit(demo1)', function(data) {
                        // 阻止表单默认提交行为
                        event.preventDefault();

                        // 获取用户输入的手机号、验证码和新密码
                        var phoneNumber = data.field.phoneNumber;
                        var code = data.field.code;
                        var newPassword = data.field.newPassword;

                        // 表单验证
                        if (!phoneNumber || !code || !newPassword) {
                            // 如果有必填字段未填写，显示相应的提示信息
                            layer.msg("请填写必填字段");
                            return false; // 阻止表单提交
                        }

                        if (!isCodeSent) {
                            layer.msg("请先获取验证码");
                            return false;
                        }

                        var formdata = new FormData();
                        formdata.append("phoneNumber", phoneNumber);
                        formdata.append("code", code);
                        formdata.append("newPassword", newPassword);

                        // 发送请求到后台，验证手机号和验证码
                        axios.post('http://localhost:8080/doVerify', formdata)
                            .then(function(response) {
                                // 请求成功的处理逻辑
                                layer.msg("重置密码成功");
                                setTimeout(function() {
                                    layer.close(index); // 关闭当前弹窗
                                }, 2000); // 2秒后关闭弹窗
                            })
                            .catch(function(error) {
                                // 请求失败的处理逻辑
                                layer.msg("请求失败，请稍后再试");
                                setTimeout(function() {
                                    layer.close(index); // 关闭当前弹窗
                                }, 2000); // 2秒后关闭弹窗
                            });

                        return false; // 阻止表单提交
                    });




                }
            });
        });

    });
</script>



</body>
</html>